<template>
  <div id="GanttChart1" class="GanttChart1 h-[400px]" width="100%"></div>
</template>

<script>
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { gantt } from "dhtmlx-gantt";
export default {
  name: "GanttChart1",
  props: {
    contractCharList: {
      type: Array,
      required: true,
      default: () => [],
    },
    myChartStart: {
      type: String,
      required: true,
      default: "",
    },
    myChartEnd: {
      type: String,
      required: true,
      default: "",
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      gantt.clearAll();
      // step1:设置中文
      gantt.i18n.setLocale("cn");
      // step2:月、日、星期几格式
      gantt.config.scales = [
        { unit: "month", step: 1, format: "%Y-%m" },
        { unit: "day", step: 1, format: "%d" },
        { unit: "day", step: 1, format: "%D" },
      ];
      gantt.config.scale_height = 3 * 28;
      gantt.init(
        "GanttChart1",
        new Date(this.getData(this.myChartStart, -3)),
        new Date(this.getData(this.myChartEnd, 3)),
      );
      gantt.config.columns = [
        { name: "text", label: "任务名称", width: 150, resize: true },
        { name: "start_date", align: "center", width: 0, resize: true, hide: true },
        { name: "end_date", align: "center", width: 0, resize: true, hide: true },
        { name: "add", width: 0, resize: true, hide: true },
      ];
      gantt.parse({
        data: this.contractCharList,
      });
    },
    getData(time, day) {
      const today = new Date(time);
      const targetday = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday);
      const tYear = today.getFullYear();
      let tMonth = today.getMonth();
      let tDate = today.getDate();
      tMonth = this.doHandMonth(tMonth + 1);
      tDate = this.doHandMonth(tDate);
      return `${tYear}-${tMonth}-${tDate}`;
    },
    doHandMonth(month) {
      let m = month;
      if (month.toString().length == 1) {
        m = `0${month}`;
      }
      return m;
    },
  },
};
</script>

<style scoped>
.weekend {
  background: #f4f7f4 !important;
}

.task_groups {
  background-color: orangered !important;
}

.task_groups .gantt_task_progress {
  background-color: red;
  opacity: 0.6;
}

.gantt_task_row.gantt_selected .weekend {
  background-color: #c0e8ff !important;
}
</style>
